function Page(el,options = {}){
    this.el = document.querySelector(el)
    this.options = options
    this.init()
}
Page.prototype.init = function(){
    // this.parentTag()

    //绑定事件
    this.bindEvent()
    this.createTag()
}
// Page.prototype.parentTag = function(){
//     this.el.style.display = 'flex'
//     this.el.style.justifyContent = 'center'
//     this.el.style.alignItems = 'center'
// }

Page.prototype.bindEvent = function(){
    this.el.onclick = (e)=>{
        let evt = e || window.event
        let target = evt.target || evt.srcElement
        // console.log(target);
        if(target.nodeName ==='P'){

            switch (target.innerText) {
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    break;
                case this.options.pageTag.prev:
                    // 留心：最少是第一页
                    if (this.options.pageInfo.pageNum == 1) return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    // 留心：最多是总页数
                    if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
                    this.options.pageInfo.pageNum++
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                    break;
                default:
                    // ...                               innerText  ...       NaN    innerHTML  ...        NaN
                    // 数字                              innerText  字符串数字 数字   innerHTML  字符串数字   数字
                    // 第3个盒子 P   里面有 HTML、数字    innerText  一堆数字   数字   innerHTML  字符串+数字  NaN
                    if (parseInt(target.innerHTML) > 0) {
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                    }
                    break;
                }
                this.createTag()

        }
    }
}

Page.prototype.createTag = function(){
    this.el.innerHTML =''

    let pageTag = this.options.pageTag
    for(let key in pageTag){
        this.createp('p',pageTag[key],this.el)



    }
    this.createNum()
}

//中间数字
Page.prototype.createNum = function(){
    let box = this.el.querySelector('p:nth-of-type(3)')
    box.style.border = 'none'
    box.style.margin = '0px'
    box.style.padding = '0px'
    // for(let i =1;i<6;i++){
    //     this.createp('p',i,box)
    // }
    let pageNum = this.options.pageInfo.pageNum
    //总页数向上取整:总页数=向上取整（总条数/每页显示条数）
    this.options.pageInfo.totalPage = Math.ceil(
        this.options.pageInfo.totalData/this.options.pageInfo.pageSize
    )
    let totalPage = this.options.pageInfo.totalPage

    if(totalPage<7){
        for(let i =1;i<=totalPage;i++) {
            this.createp('p',i,box)
        }
        }
    else if(pageNum<5){
        // this.createp('p',1,box)
        // this.createp('p',2,box)
        // this.createp('p',3,box)
        // this.createp('p',4,box)
        // this.createp('p',5,box)
        for(let i =1;i<=5;i++) {
            this.createp('p',i,box)
        }
        this.createp('p','...',box)
        this.createp('p',totalPage-1,box)
        this.createp('p',totalPage,box)
    }else if(pageNum == 5) {
        for(let i =1;i<=7;i++) {
            this.createp('p',i,box)
        }
        this.createp('p','...',box)
        this.createp('p',totalPage-1,box)
        this.createp('p',totalPage,box)
    }else if(pageNum>5&& pageNum<totalPage-4){
        for(let i =1;i<=2;i++) {
            this.createp('p',i,box)
        }
        this.createp('p','...',box)

        this.createp('p',pageNum-2,box)
        this.createp('p',pageNum-1,box)
        this.createp('p',pageNum,box)
        this.createp('p',pageNum+1,box)
        this.createp('p',pageNum+2,box)

        this.createp('p','...',box)
        this.createp('p',totalPage-1,box)
        this.createp('p',totalPage,box)
    }
    else if(pageNum>=totalPage-4){
        for(let i =1;i<=2;i++) {
            this.createp('p',i,box)
        }
        this.createp('p','...',box)
        for(let i = totalPage-4;i<=totalPage;i++) {
            this.createp('p',i,box)
        }
        
    }
}
//页码创建
Page.prototype.createp = function(tagName,content,fobj){

    let pobj = document.createElement(tagName)
    pobj.innerText = content
    pobj.style.border = 'solid 1px black'
    pobj.style.margin = '0 5px'
    pobj.style.padding = '0 5px'
    pobj.style.display = 'inline-block'

    if(content ==this.options.pageInfo.pageNum) pobj.style.background = 'pink'

    fobj.appendChild(pobj)

}